<template>
	<view class="content">
		<view class="icon-area">
			<view class="eye">
				<u-icon name="location-outline" custom-prefix="el-icon" color="#00a600" size="60"></u-icon>
			</view>
			<view class="eye-text">
				<h3 style="color: #00a600;">视导</h3>
				<text style="font-size: 12px; color: #B3B3B3;">
					贵阳市现场视导工作是对教育质量监测工作的有效补充，现场视导的情况可以有效验证质量监测结果的指标数据。
				</text>
			</view>
		</view>

		<view class="important">
			<view class="important-box">
				<view class="metric">
					<u-icon name="bookmark" color="red" size="40"></u-icon>
					<text>非常重视</text>
				</view>
				<view class="metric">
					<u-icon name="bookmark" color="#aa00ff" size="40"></u-icon>
					<text>一般重要</text>
				</view>
				<view class="metric">
					<u-icon name="bookmark" color="#636363" size="40"></u-icon>
					<text>普通指标</text>
				</view>
			</view>
			<view class="text">
				<text>正在视导</text>
			</view>
		</view>

		<view class="view">
			<view class="record" v-if="showRecord">
				<view class="school">
					<u-icon name="unit" color="#3288DF" custom-prefix="ex-icon" size="18"></u-icon>
					<text style="margin-left: 0.5vh;">学校：{{newestCommentData.schoolName}}</text>
				</view>
				<view class="metric">
					<u-icon name="shujugailan" color="#3288DF" custom-prefix="ex-icon" size="18"></u-icon>
					<text style="margin-left: 0.5vh;"> 指标：{{newestCommentData.targetName}}</text>
				</view>
				<view class="active">
					<u-icon name="s-promotion" color="#3288DF" custom-prefix="el-icon" size="18"></u-icon>
					<text style="margin-left: 0.5vh;"> 活动：{{newestCommentData.activityName}}</text>
				</view>
			</view>
			<view v-if="!showRecord" class="record">
				<text>暂无任何记录!</text>
			</view>
			<view>
				<view class=" view-box">
					<u-button v-if="showRecord && newestCommentData.commitState===1" type="info" text="查看记录"
						color="#1DBB9C" @click="viewRecords()"></u-button>
					<u-button v-if="showRecord && newestCommentData.commitState===0" type="info" text="继续视导"
						color="#00a600" @click="continueRecord(newestCommentData)"></u-button>
					<u-button type="primary" text="现场视导" color="#3288DF" @click="viewVideo()"></u-button>
				</view>
			</view>
		</view>
		<u-modal :show="show" showCancelButton :content='content' @cancel="cancel" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import {
		getNewestComment
	} from "@/api/supervise/index.js"
	import {
		isNotNull
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				// 显示弹框
				show: false,
				showRecord: true,
				// 弹框内容
				content: "开始新的视导后只能对已完成未提交的视导内容进行修改，确定开始吗？",
				newestCommentData: {},
				isNotNull
			}
		},
		onLoad() {
			this.getNewestComment();
		},
		onShow() {

		},
		methods: {
			viewRecords() {
				this.$tab.navigateTo("/pages/index/viewRecords/records?queryData=" + encodeURIComponent(JSON
					.stringify(this.newestCommentData)));
			},
			viewVideo() {
				this.show = true
			},
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
				this.$tab.navigateTo("/pages/index/viewVideo/actives");
			},
			getNewestComment() {
				getNewestComment().then(res => {
					if (res.status === 0) {
						if (isNotNull(res.comment)) {
							this.newestCommentData = res.comment;
							var pages = getCurrentPages();
							var page = pages[pages.length - 1];
							var currentWebview = page.$getAppWebview();
							var tn = currentWebview.getStyle().titleNView;
							tn.buttons[0].redDot = res.hasMessage === 1;
							currentWebview.setStyle({
								titleNView: tn
							});
						} else {
							this.showRecord = false
						}

					}

				})

			},
			continueRecord(item) {
				const queryData = {
					activityId: item.activityId,
					schoolId: item.schoolId,
					schoolName: item.schoolName,
					createTime: item.createTime
				}
				this.$tab.navigateTo("/pages/index/supervise/supervise-target?queryData=" + encodeURIComponent(JSON
					.stringify(queryData)));
			}


		},
		/**
		 * 监听 TabBar 切换点击 
		 */
		onTabItemTap: function(item) {
			this.getNewestComment();
		},
		onNavigationBarButtonTap(event) {
			this.$tab.navigateTo("/pages/index/message/message");
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;

		.text-area {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22px;
			height: 10vh;
			width: 100vw;
			color: #fff;
			background-color: black;
			position: relative;

			.msg-box {
				position: absolute;
				right: 20px;
			}

			.tips {
				z-index: 999;
				position: absolute;
				top: 22px;
				right: 29px;
			}
		}

		.icon-area {
			width: 100vw;
			display: flex;
			height: 17vh;
			padding: 12px 15px;
			background-color: #FFFFFF;
		}

		.important {
			background-color: #F2F2F0;
			padding: 8px 10px 15px 10px;
			border: 1px solid #5e5e5e;
			height: 17vh;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.important-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.metric {
					display: flex;
					align-items: center;
				}
			}


		}

		.view {
			background-color: #FFFFFF;
			padding: 0 15px 20px;
			height: 28vh;

			.school,
			.metric,
			.active {
				display: flex;
				height: 6vh;
				line-height: 6vh;
			}

			.metric,
			.active {
				border-top: solid 1px #5e5e5e;
			}

			.view-box {
				padding: 10px 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.u-button {
					width: 120px;
				}
			}
		}

	}
</style>